<template>
  <div class="container_warp g-padding-x">
    <div class="search_wrap test-harry">
      <d-search v-model="search" icon-position="left" placeholder="搜索前沿资讯" @keypress.enter="handleConfirm" />
      <div />
      <!-- 轮播图 -->
      <div class="swiper_news_wrap">
        <div class="swiper_wrap">
          <DCarousel :autoplay="true">
            <DCarouselItem v-for="item in recentlyUpdateList" :key="item.id">
              <GLink :href="`/news/${item.id}`" target="_blank">
                <img :key="item.coverImg" class="cover_img" :src="item.coverImg">
              </GLink>

            </DCarouselItem>
          </DCarousel>
        </div>
        <div class="news_wrap" v-show="recentlyUpdateList.length">
          <div class="title mb-[8px]">
            最近更新
          </div>
          <div v-for="item in recentlyUpdateList" :key="item.id" class="news_list mb-[8px]">
            <GLink :href="`/news/${item.id}`" target="_blank">
              <News :data="item" />
            </GLink>
          </div>
        </div>
      </div>
      <!-- 资讯专栏 -->
      <div class="special_column_wrap">
        <div class="special_list">
          <span v-for="(item, index) in specialList" :key="item"
            :style="{ color: specialIndex === index ? '#242536' : '#9C9DB4' }" @click="handlerType(item, index)">{{
              item }}</span>
        </div>

        <div class="card_list_wrap">
          <div v-for="item in newsList" :key="item.id" class="list_child" :span="6">
            <GLink :href="`/news/${item.id}`" target="_blank">
              <Card :data="item" />
            </GLink>
          </div>
        </div>
        <p class="tips" v-show="newsList.length">没有更多了</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Carousel as DCarousel, CarouselItem as DCarouselItem } from 'vue-devui/carousel'
import News from './components/News.vue'
import Card from './components/Card.vue'
import type { IResult } from './types/index'
import newsData from '../Data/news.json'


const newsList = ref<Array<IResult>>([]) // 每个专栏的文章列表
const specialIndex = ref(0) // 点击的第几个专栏
const specialList = ref<Array<string>>([]) // 专栏列表
const recentlyUpdateList = ref<Array<IResult>>([]) // 最近更新的文章列表
const search = ref('') // 搜索参数
const recentlyUpdateIdsList = ref<Array<string>>([]) // 最近更新列表的id组合
const allContentList = ref<Array<IResult>>([]) // 所有的文章集合

// 点击每一个专栏
function handlerType(keyword: string, index: number) {
  specialIndex.value = index
  getSubList(keyword)
}

// 获取专栏列表
function getSpecialTypeList() {
  specialList.value = Object.keys(newsData) // 获取专栏的集合
  allContentList.value = Object.values(newsData).flat() // 获取所有的文章列表
  getArticleListData()

}

// 获取每个专栏的文章列表,并还要排除掉最近更新的文章
function getSubList(keyword:string) {
  newsList.value = newsData[keyword].filter((res: IResult) => !recentlyUpdateIdsList.value.includes(res.id))
}

//转换时间
function changeTime() {
  return allContentList.value.map((res:IResult) => {
    res.releaseTime = new Date(res.releaseTime).getTime()
    return res
  })
}

//按时间排序
function sortTime(list:Array<IResult>) {
  if (Array.isArray(list) && list.length) {
    return list.sort((a, b) => {
      return a.releaseTime < b.releaseTime ? 1 : -1
    })
  } {
    return []
  }

}
// 获取所有的文章列表包括未被收录的,并还要排除掉最近更新的文章
function getArticleListData() {

  recentlyUpdateList.value = sortTime(changeTime()).slice(0, 4) // 展示4篇最近更新的文章
  //最近更新的文章id集合
  recentlyUpdateIdsList.value = recentlyUpdateList.value.map((res: Record<string, any>) => res.id)
  //展示第一个专栏的文章,并还要排除掉最近更新的文章
  const key = specialList.value[0] as any
  newsList.value = newsData[key].filter((res: IResult) => !recentlyUpdateIdsList.value.includes(res.id)) // 获取一个专栏的数据
}

// 跳转到搜索页面
function handleConfirm() {
  navigateTo({
    name: 'search',
    query: {
      search: search.value,
      tab: 'article'
    }
  })
}

getSpecialTypeList()
</script>

<style lang="scss" scoped>
.container_warp {
  max-width: 1200px;
  margin: 0 auto;
  min-height: 500px;

  .search_wrap {
    width: 100%;
    margin: 20px auto;
  }

  .swiper_news_wrap {
    margin: 20px auto;
    display: flex;
    align-items: center;
  }

  .swiper_wrap {
    flex: 1;

    :deep(.devui-carousel__item-wrapper) {
      border-radius: 4px;
    }
  }

  .news_wrap {
    padding: 8px;
    border-radius: 4px;
    height: 100%;
    border: 1px solid #E3E3EE;
    flex: 0 0 300px;
    margin-left: 16px;
    overflow: hidden;
    min-height: 370px;

    .title {
      font-size: 16px;
      color: #3B3E55;
      font-weight: 600;
      padding: 12px 8px;
      background-color: #F9F9FB;
    }
  }
}

.special_list {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid #F1F1F8;

  span {
    font-size: 16px;
    font-weight: 600;
    color: #242536;
    padding-right: 32px;
    cursor: pointer;
  }
}

.card_list_wrap {
  margin-top: 16px;
  display: grid;

}

.special_column_wrap {
  .tips {
    font-size: 14px;
    color: #9C9DB4;
    padding: 20px 0;
    text-align: center;
  }
}

.cover_img {
  object-fit: cover;
  height: 366px;
  width: 100%;
  border-radius: 4px;
}


@media screen and (max-width: 1280px) {
  .news_wrap {
    display: none;
  }

  .swiper_wrap .devui-carousel {
    height: 100%;
  }
}


@media screen and (max-width: 768px) {
  .cover_img {
    border-radius: 5px;
    height: 148px;
  }

  .card_list_wrap {
    @apply grid-cols-2 gap-2
  }
}

@media screen and (min-width: 768px) {
  .swiper_wrap .devui-carousel {
    height: 366px !important;
  }

  .card_list_wrap {
    @apply grid-cols-4 gap-4
  }
}
</style>
